<template>
  <transition
    enter-active-class="animate__animated animate__fadeIn"
    leave-active-class="animate__animated animate__fadeOut"
  >
    <div class="popup-wrap" v-show="visible" @touchmove.prevent @click="close">
      <transition
        enter-active-class="animate__animated animate__bounceIn"
        leave-active-class="animate__animated animate__bounceOut"
      >
        <div class="popup-box" v-show="visible" @click.stop>
          <header class="popup-header">
            <h2 v-show="title">{{title}}</h2>
            <a href="javascript:;" class="close">
              <i class="iconfont icon-shanchu1" @click="close"></i>
            </a>
          </header>
          <div class="popup-content">
            <slot></slot>
          </div>
        </div>
      </transition>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'popup',
  props: {
    title: {
      type: String,
      default: ''
    },
    visible: Boolean
  },
  methods: {
    close () {
      this.$emit('update:visible', false)
      // this.show = false
    }
  },
  mounted () {
    console.log(this.$slots)
  }
}
</script>

  <style lang="scss" scoped>
  .popup-wrap {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 100;
    display: flex;
    .popup-box {
      @include wh(900px, auto);
      min-height: 200px;
      background: #fff;
      margin: auto;
      border-radius: 4px;
      overflow: hidden;
      .popup-header {
        position: relative;
        h2 {
          font-size: 16px;
          line-height: 50px;
          padding: 0 10px;
          border-bottom: 1px solid $color-border;
        }
        a {
          text-decoration: none;
          position: absolute;
          right: 10px;
          top: 20px;
          i {
            font-size: 24px;
            color: #ccc;
          }
        }
      }
    }
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
  </style>
